<template>
    <div class="broast-box">
        <div class="show-box">
            <span class="left"></span>
            <span class="englishText">Personality style</span>
            <span class="text">个性展示</span>
            <span class="right"></span>
        </div>
        <div class="broast-content">
            <div class="top">
                <div class="top-box">
                    <div class="arrow-left" @click="turnLeft">&lt;</div>
                    <div class="arrow-right" @click="turnRight">&gt;</div>
                    <div class="uls" :style="{transform:'translateX('+ (-1100*(currentIndex))+'px)'}">
                        <div class="lis" v-for="(item,index) in ulsList" :key="index">
                            <img :src="item.imgSrc" alt="">
                            <img :src="item.imgSrc2" alt="">
                            <img :src="item.imgSrc3" alt="">
                            <div class="trangle">
                                <div class="trangle-box"></div>
                                <div class="text-box">
                                    <p class="big">{{ item.ulsTitle}}</p>
                                    <p class="center">{{ item.ulsName}}</p>
                                    <p class="small">{{ item.ulsContent}}</p>
                                </div>
                            </div>
                            <div class="bias"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="bottom-box">
                    <div class="arrow-left2" @click="turnLeft2">&lt;</div>
                    <div class="arrow-right2" @click="turnRight2">&gt;</div>
                    <div class="uls2" :style="{transform:'translateX('+ (-1100*(currentIndex2))+'px)'}">
                        <div class="lis2" v-for="(item,index) in ulsList2" :key="index+'1'">
                            <img :src="item.imgSrc" alt="">
                            <img :src="item.imgSrc2" alt="">
                            <img :src="item.imgSrc3" alt="">
                            <div class="trangle">
                                <div class="trangle-box trangle2-box"></div>
                                <div class="text-box2">
                                    <p class="big2">{{ item.ulsTitle }}</p>
                                    <p class="center2">{{ item.ulsName}}</p>
                                    <p class="small2">{{ item.ulsContent}}</p>
                                </div>
                            </div>
                            <div class="bias2"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="down">
                <div class="down-one">
                    <img src="../../assets/d1.jpg" alt="">
                    <div class="down-text"><p>试想一下，意大利浪漫温暖的晨光，落在你嘴唇上的感觉~(是心动啊~)</p></div>
                </div>
                <div class="down-two">
                    <img src="../../assets/d2.jpg" alt="">
                    <div class="down-text"><p>传说中的蓝调红，略带冷调的复古枣泥红，非常浓郁。</p></div>
                </div>
                <div class="down-three">
                    <img src="../../assets/d3.jpg" alt="">
                    <div class="down-text"><p>玫瑰的娇艳在你的双唇之上缓缓绽放，质地轻柔温和呵护你的双唇。</p></div>
                </div>
            </div>
        </div>
        <div class="content-border"></div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                ulsList: [{
                    imgSrc: require("../../assets/c1.jpg"),
                    imgSrc2: require("../../assets/c2.jpg"),
                    imgSrc3: require("../../assets/c3.jpg"),
                    ulsTitle: "CC's对于穿搭和时尚的理解",
                    ulsName: "宋妍霏",
                    ulsContent: "CC's对于穿搭和时尚的理解"
                },{
                    imgSrc: require("../../assets/c2_1.jpg"),
                    imgSrc2: require("../../assets/c2_2.jpg"),
                    imgSrc3: require("../../assets/c2_3.jpg"),
                    ulsTitle: "NiNi's用她的穿搭告诉你，什么叫高级的性感",
                    ulsName: "倪妮",
                    ulsContent: "NiNi's用她的穿搭告诉你，什么叫高级的性感"
                },{
                    imgSrc: require("../../assets/c1.jpg"),
                    imgSrc2: require("../../assets/c2.jpg"),
                    imgSrc3: require("../../assets/c3.jpg"),
                    ulsTitle: "CC's对于穿搭和时尚的理解",
                    ulsName: "宋妍霏",
                    ulsContent: "CC's对于穿搭和时尚的理解"
                },{
                    imgSrc: require("../../assets/c2_1.jpg"),
                    imgSrc2: require("../../assets/c2_2.jpg"),
                    imgSrc3: require("../../assets/c2_3.jpg"),
                    ulsTitle: "NiNi's用她的穿搭告诉你，什么叫高级的性感",
                    ulsName: "倪妮",
                    ulsContent: "NiNi's用她的穿搭告诉你，什么叫高级的性感"
                },{
                    imgSrc: require("../../assets/c1.jpg"),
                    imgSrc2: require("../../assets/c2.jpg"),
                    imgSrc3: require("../../assets/c3.jpg"),
                    ulsTitle: "CC's对于穿搭和时尚的理解",
                    ulsName: "宋妍霏",
                    ulsContent: "CC's对于穿搭和时尚的理解"
                },{
                    imgSrc: require("../../assets/c2_1.jpg"),
                    imgSrc2: require("../../assets/c2_2.jpg"),
                    imgSrc3: require("../../assets/c2_3.jpg"),
                    ulsTitle: "NiNi's用她的穿搭告诉你，什么叫高级的性感",
                    ulsName: "倪妮",
                    ulsContent: "NiNi's用她的穿搭告诉你，什么叫高级的性感"
                }],
                ulsList2: [{
                    imgSrc: require("../../assets/cd1.jpg"),
                    imgSrc2: require("../../assets/cd3.jpg"),
                    imgSrc3: require("../../assets/cd2.jpg"),
                    ulsTitle: "若隐若现的时尚小心机",
                    ulsName: "性感",
                    ulsContent: "若隐若现的时尚小心机"
                },{
                    imgSrc: require("../../assets/cd4.jpg"),
                    imgSrc2: require("../../assets/cd5.jpg"),
                    imgSrc3: require("../../assets/cd6.jpg"),
                    ulsTitle: "牛仔裤的性感时尚",
                    ulsName: "牛仔裤",
                    ulsContent: "牛仔裤的性感时尚"
                },{
                    imgSrc: require("../../assets/cd1.jpg"),
                    imgSrc2: require("../../assets/cd3.jpg"),
                    imgSrc3: require("../../assets/cd2.jpg"),
                    ulsTitle: "若隐若现的时尚小心机",
                    ulsName: "性感",
                    ulsContent: "若隐若现的时尚小心机"
                },{
                    imgSrc: require("../../assets/cd4.jpg"),
                    imgSrc2: require("../../assets/cd5.jpg"),
                    imgSrc3: require("../../assets/cd6.jpg"),
                    ulsTitle: "牛仔裤的性感时尚",
                    ulsName: "牛仔裤",
                    ulsContent: "牛仔裤的性感时尚"
                },{
                    imgSrc: require("../../assets/cd1.jpg"),
                    imgSrc2: require("../../assets/cd3.jpg"),
                    imgSrc3: require("../../assets/cd2.jpg"),
                    ulsTitle: "若隐若现的时尚小心机",
                    ulsName: "性感",
                    ulsContent: "若隐若现的时尚小心机"
                },{
                    imgSrc: require("../../assets/cd4.jpg"),
                    imgSrc2: require("../../assets/cd5.jpg"),
                    imgSrc3: require("../../assets/cd6.jpg"),
                    ulsTitle: "牛仔裤的性感时尚",
                    ulsName: "牛仔裤",
                    ulsContent: "牛仔裤的性感时尚"
                }],
                currentIndex: 0,
                currentIndex2: 0
            }
        },
        mounted() {
            setInterval(this.turnRight,2000)
            setInterval(this.turnLeft2,2000)
        },
        methods: {
            // top 
            turnLeft() {
                if(this.currentIndex > 0) {
                    --this.currentIndex;
                }else {
                    this.currentIndex = this.ulsList.length-1;
                }
            },
            turnRight() {
                if(this.currentIndex < this.ulsList.length-1) {
                    ++this.currentIndex;
                }else {
                    this.currentIndex = 0;
                }
            },
            // bottom
            turnLeft2() {
                if(this.currentIndex2 > 0) {
                    --this.currentIndex2;
                }else {
                    this.currentIndex2 = this.ulsList2.length-1;
                }
            },
            turnRight2() {
                if(this.currentIndex2 < this.ulsList2.length-1) {
                    ++this.currentIndex2;
                }else {
                    this.currentIndex2 = 0;
                }
            }
        }
    }
</script>
<style>
    .top-box .uls, .bottom-box .uls2 {
        width: 6600px;
        filter: blur(0px);
        overflow: hidden;
        transition: all 1s;
    }
    .content-border {
        width: 100%;
        height: 5px;
        background: #efefec;
        margin: 80px 0px;
    }

    .text-box2 {
        clear: both;
        width: 52%;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 0%;
        padding: 20px 0px;
        box-sizing: border-box;
        word-break:break-all;  
        white-space:normal;
    }
    .text-box2 p {
        font-family: "宋体";
        cursor: pointer;
        color: #000;
        line-height: 50px;
        text-align: left;
    }
    .big2 {
        clear: both;
        font-size: 40px;
        text-decoration: underline;
    }
    .big2:hover, .center2:hover {
        color: #B9995A;
    }
    .center2 {
        font-size: 32px;
        text-decoration: underline;
    }
    .small2 {
        font-size: 24px;
    }


    /* 底部三张图片 */
    .down {
        width: 1000px;
        overflow: hidden;
        display: flex;
        justify-content: space-around;
        padding-bottom: 80px;
        margin-top: 50px;
    }
    .down .down-one,.down .down-two,.down .down-three {
        width: 30%;
        float: left;
        position: relative;
    }
    .down .down-one img,.down .down-two img,.down .down-three img {
        width: 100%;
        transition: transform .6s;
    }
    .down .down-one img:hover,.down .down-two img:hover,.down .down-three img:hover {
        transform: scale(1.1);
    }
    .down-text {
        width: 90%;
        height: 150px;
        border: 1px solid #000;
        position: absolute;
        bottom: -65px;
        left: 5%;
        font-size: 22px;
        padding: 10px;
        box-sizing: border-box;
        background: #fff;
        cursor: pointer;
        font-family: "宋体";
    }
    .down-text p:hover {
        color: #B9995A;
    }
    .down-text P {
        margin-top: 24px;
    }

    .broast-content .bottom {
        overflow: visible;
    }
    /* 第二栏箭头 */
    .arrow-left2, .arrow-right2 {
        position: absolute;
        top: 40%;
        left: -30px;
        transform: translateX(-50%);
        width: 40px;
        height: 60px;
        line-height: 60px;
        color: #fff;
        cursor: pointer;
        z-index: 4;
        background: #000;
        font-size: 20px;
    }
    .arrow-right2 {
        left: 103%;
    }

    /* 第一栏 */
    .broast-content .top, .broast-content .bottom {
        position: relative;
        padding-bottom: 60px;
        width: 1100px;
        left: 50%;
        transform: translateX(-50%);
        overflow: hidden;
    }
    
    .top-box, .bottom-box {
        width: 1000px;
        height: 454px;
        /* border: 1px solid #000; */
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .uls, .uls2 {
        width: 2200px;
        /* overflow: hidden; */
    }
    .top-box .uls img, .bottom-box .uls2 img {
        width: 280px;
        height: 420px;
        float: left;
    }
    .uls2 img:nth-of-type(1) {
        margin-left: 120px;
    }
    .lis, .lis2 {
        width: 1100px;
        height: 420px;
        overflow: hidden;
        float: left;
        position: relative;
        
    }
    .trangle {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .trangle-box {
        width: 0px;
        height: 38px;
        border-left: 1028px solid transparent;
        border-bottom: 416px solid #FFF;
    }
    .trangle .trangle2-box {
        width: 0;
        height: 87px;
        border-right: 1028px solid transparent;
        border-bottom: 416px solid #FFF;
        position: relative;
        border-left: 0;
    }
    .bias, .bias2 {
        width: 107%;
        height: 1px;
        -webkit-transform: rotate(-22deg);
        background: #000;
        position: absolute;
        bottom: 200px;
        left: -400px;
        
    }
    .bias {
        width: 90%;
        left: 78px;
    }
    .bias2 {
        -webkit-transform: rotate(22deg);
        top: 287px;
        left: -94px;
    }

    .text-box {
        width: 490px;
        position: absolute;
        top: 50%;
        left: 500px;
        /* border: 1px solid #000; */
    }
    .text-box p {
        font-family: "宋体";
        cursor: pointer;
        color: #000;
    }
    .big {
        font-size: 40px;
        text-decoration: underline;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .big:hover, .center:hover {
        color: #B9995A;
    }
    .center {
        text-decoration: underline;
        font-size: 32px;
        text-align: right;
        margin-top: 10px;
    }
    .small {
        font-size: 24px;
        text-align: right;
        margin-top: 30px;
    }

    /* 第一栏箭头 */
    .top-box .arrow-left, .top-box .arrow-right {
        width: 40px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        position: absolute;
        top: 40%;
        left: -3%;
        transform: translateX(-50%);
        background: #000;
        color: #fff;
        font-size: 20px;
        z-index: 3;
        cursor: pointer;
    }
    .top-box .arrow-right {
        left: 103%;
    }

    .broast-content {
        width: 1000px;
        margin: 0 auto;
    }
    
    /* 头部 */
    .show-box {
        margin-top: 50px;
        position: relative;
        padding-top: 30px;
    }
    .left, .right {
        display: inline-block;
        width: 40%;
        height: 20px;
        position: relative;
    }
    .left:before,.right:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background: #000;
    }
    .text {
        margin: 0px 10px;
        font-size: 30px;
    }
</style>